/* 学习目标：了解-Link和NavLink组件的使用  */
// 作用 ： 都可以通过to跳转路由
// 不同： NavLink自带高亮类名

import {
  // import from中  as 是重命名的意思
  BrowserRouter as Router,
  Link,
  NavLink,
  Route,
  Routes,
} from 'react-router-dom';
import './index.css';

import React from 'react';
import Find from './components/Find';
import Friend from './components/Friend';
import Home from './components/Home';
import My from './components/My';

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/home">点我跳转-首页</Link>
        <br />
        <NavLink to="/home">点我跳转-首页NavLink</NavLink>
        <br />
        <Link to="/find">点我跳转-发现</Link>
        <br />
        <Link to="/my">点我跳转-我的</Link>
        <br />
        <Link to="/friend">点我跳转-朋友</Link>
        <br />
        <Routes>
          {/* Route设置路由规则 和 挂载点 💥💥 element接收的是一个组件标签写法，  */}
          <Route path="/home" element={<Home />} />
          <Route path="/find" element={<Find />} />
          <Route path="/my" element={<My />} />
          <Route path="/friend" element={<Friend />} />
        </Routes>
      </div>
    </Router>
  );
}
